<template>
  <div class="fix_nav">
    <ul class="menu_btn" v-show="btn_show">
      <li v-for="(item,index) in nav_list" :key="index" @click="link_func(item)">{{ item.name }}</li>
    </ul>
    <div class="btn_box" @click="menu_show()" id="fix_btn">
      <img src="../../../static/svg/add_btn.png" alt="" class="icon">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nav_list: [
        {
          name: "商品分类",
          url: "/goods"
        },
        {
          name: "我的订单",
          url: "/order_list"
        },
        {
          name: "我的",
          url: "/my"
        }
      ],
      btn_show: false
    }
  },

  mounted() {},
  methods: {
    link_func(item) {
      this.$router.push(item.url)
      this.btn_show = false
    },
    menu_show() {
      this.btn_show = !this.btn_show
    }
  }
}
</script>

<style scoped>
.btn_box {
  position: fixed;
  right: 35px;
  bottom: 86px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 100;
}
.icon {
  width: 100%;
}
.menu_btn {
  position: fixed;
  right: 36px;
  bottom: 135px;
  background: #00b43c;
  z-index: 99;
  width: 40px;
  border-radius: 5px;
  overflow: hidden;
}
.menu_btn li {
  padding: 8px;
  background: #00b43c;
  color: #fff;
  font-size: 12px;
}
</style>

